import React, { useEffect, useState } from "react";
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from "@ant-design/icons";
import { Menu, ConfigProvider } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import "./index.scss";
const items = [
  { key: "/", icon: <PieChartOutlined />, label: "首 页" },
  { key: "about", icon: <DesktopOutlined />, label: "关于我们" },
  { key: "news", icon: <ContainerOutlined />, label: "新闻列表" },
  {
    key: "system",
    label: "系统管理",
    icon: <MailOutlined />,
    children: [
      { key: "system/user", label: "用户管理" },
      { key: "system/menu", label: "菜单管理" },
      { key: "system/rights", label: "权限管理" },
      { key: "system/personal", label: "个人信息管理" },
    ],
  },
  // {
  //   key: "sub2",
  //   label: "Navigation Two",
  //   icon: <AppstoreOutlined />,
  //   children: [
  //     { key: "9", label: "Option 9" },
  //     { key: "10", label: "Option 10" },
  //     {
  //       key: "sub3",
  //       label: "Submenu",
  //       children: [
  //         { key: "11", label: "Option 11" },
  //         { key: "12", label: "Option 12" },
  //       ],
  //     },
  //   ],
  // },
];
const Sidebar = () => {
  const location = useLocation();
  const [path, setPath] = useState<any>("/");
  let arr: any = [];
  arr.push(items[0]);
  const navigate = useNavigate();

  const [allOpenKeys, setAllOpenKeys] = useState<any>(["system"]);

  useEffect(() => {
    const key = location.pathname.replace("/", "") || "/";
    setPath(key);

    if (key.includes("/") && key !== "/") {
      const keys = key.split("/");
      setAllOpenKeys(keys);
    }
  }, [location.pathname]);

  const onClick = (e: any) => {
    console.log(e.key);

    navigate(e.key);

    setPath(e.key);

    // 缓存路由信息
    items.forEach((item) => {
      if (item.key === e.key) {
        arr.push(item);
      } else {
        item.children?.forEach((itemk) => {
          if (itemk.key === e.key) {
            arr.push(itemk);
          }
        });
      }
    });

    const keyPath = localStorage.getItem("keyPath");
    if (keyPath) {
      let path = JSON.parse(keyPath);
      path = [...new Set([...path, ...arr])];
      path = Array.from(
        new Map(path.map((item: any) => [item.key, item])).values()
      );
      localStorage.setItem("keyPath", JSON.stringify(path));
    } else {
      localStorage.setItem("keyPath", JSON.stringify(arr));
    }
  };

  const onOpenChange = (keys: any) => {
    setAllOpenKeys(keys);
  };

  return (
    <ConfigProvider
      theme={{
        components: {
          Menu: {
            /* 这里是你的组件 token */
            darkItemSelectedBg: "#1890ff",
          },
        },
      }}
    >
      <h2 className="title">管理系统</h2>
      <Menu
        selectedKeys={[path]}
        defaultOpenKeys={["system"]}
        openKeys={allOpenKeys}
        mode="inline"
        theme="dark"
        items={items}
        onClick={onClick}
        onOpenChange={onOpenChange}
      />
    </ConfigProvider>
  );
};
export default Sidebar;
